<%@ page import="com.pixiv.user.User" %>
<%@ page import="com.pixiv.MysqlDAO.UserLoginDAO" %><%--
  Created by IntelliJ IDEA.
  User: hasee
  Date: 2021/11/8
  Time: 18:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<html>
<head>
    <title>某个不知名的网站</title>
    <link rel = "stylesheet" href = "../common/layui/css/layui.css">
    <link rel = "stylesheet" href = "css/phase1.css">
    <script src = "../common/jquery3.6.0.js"></script>
    <script src = "../common/layui/layui.js"></script>
</head>
<body>
<div id = "head_test_0">
    <div>
        <div>
            <img style = "float:left;" src = "" width = "39px" height = "39px">
            <div style = "line-height:49px;float:left;"></div>
        </div>
        <div>
            <input type = "text" style = "margin-left:100px;margin-right:100px;width:40%;height:39px;float:left;">
        </div>
        <div>
            <input type = "button" style = "width:125px;height:39px;
                       border:0px;border-radius:39px;float:left;margin-left:15px;" value = "投稿"
            id = "upPictureToTarget">
            <img src = "/pixiv/PixivUserIconServlet?appType=getUserIcon"
                 style = "margin-left:5px;width:39px;height:39px;border:0px solid red;
                        background-color:blanchedalmond;border-radius:39px;float:left;">
            <div style = "float:left;margin-left:15px;">用户姓名</div>
            <div style = "margin-left:5px;background-color:rgba(0,0,0,0.1);width:39px;height:39px;float:left;"></div>
        </div>
    </div>
    <%
        User u = (User) session.getAttribute("GLOBAL_USER_OBJECT");
        if (u != null)
        {
            UserLoginDAO.initLoginUserData(u);
        }
    %>
</div>
<div id = "content_test_1">
    <div>
        <p>最新的图片</p>
        <div></div>
        <div></div>
    </div>
    <div>

        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

    </div>
    <script type = "text/javascript">

        var moveDiv = document.querySelector("#content_test_1>div:nth-child(2)");
        var movePostionX = 0;
        var left = document.querySelector("#content_test_1>div:nth-child(1)>div:nth-child(2)");
        var right = document.querySelector("#content_test_1>div:nth-child(1)>div:nth-child(3)");

        var time1 = setInterval(function(){
            var x = window.getComputedStyle(moveDiv, "");
            var initX = parseInt(x.left);
            if (initX + movePostionX <= 0 && initX + movePostionX >= -925)
            {
                moveDiv.style.left = initX + movePostionX + "px";
            }


            //x.left = parseInt(x.left) + movePostionX + "px";

        },25);

        left.onmouseover = function(){
            movePostionX = 10;
        }
        left.onmouseout = function(){
            movePostionX = 0;
        }
        right.onmouseover = function(){
            movePostionX = -10;
        }
        right.onmouseout = function(){
            movePostionX = 0;
        }


    </script>
</div>
<style type = "text/css">
    #content_test_1
    {
        width:100%;
        position:relative;
        left:0%;
        top:0px;
        height:600px;
        background-color:ghostwhite;
        border:1px solid red;
        overflow:hidden;
    }

    #content_test_1>div:nth-child(1)
    {

    }
    #content_test_1>div:nth-child(1)>div:nth-child(2)
    {
        position:absolute;
        left:0px;
        top:100px;
        width:3%;
        height:200px;
        background-color:darkblue;
        z-index:10;

    }
    #content_test_1>div:nth-child(1)>div:nth-child(2):hover
    {
        background-color:blue;
    }
    #content_test_1>div:nth-child(1)>div:nth-child(3)
    {
        position:absolute;
        left:97%;
        top:100px;
        width:3%;
        height:200px;
        background-color:darkblue;
        z-index:10;

    }
    #content_test_1>div:nth-child(1)>div:nth-child(3):hover
    {
        background-color:blue;
    }
    #content_test_1>div:nth-child(2)
    {
        width:10000px;
        position:relative;
        left:0%;
        top:40px;
        height:500px;
    }
    #content_test_1>div:nth-child(2)
    {
        width:10000px;
        position:relative;
        left:0px;
        top:40px;
        height:500px;
        border:1px solid blue;
    }

    #content_test_1>div:nth-child(2)>div
    {
        width:300px;
        height:300px;
        float:left;
        margin-left:25px;
        margin-right:25px;
        background-color:blueviolet;
    }
</style>
<script type = "text/javascript">

    //投稿按钮
    document.querySelector("#upPictureToTarget").onclick = function(){
        location.href = "/pixiv/pixiv/register.jsp";

    }
</script>
</body>
</html>